<script type="text/javascript">
var enable_submit = true;
function submit_vgroup_create() {
    var vgroup_name = $("#vgroup_create_modal").find("#vgroup_name_cr");
    var volume_ids_selector = $("#vgroup_create_modal").find(".volume_ids");
    var bValid = true;
    bValid = bValid && checkRegexp(vgroup_name, /^[0-9a-z-]+$/, "名称应由小写英文字母、数字、中划线(英文)构成.");
    bValid = bValid && checkLength(vgroup_name, "名称", 1, 32);
    var gridIDs = $('#volume_save').jqGrid('getDataIDs');
    var volume_ids = gridIDs.join(",")
    if (bValid && volume_ids == '') {
        bValid = false;
        $('.rtn-tip').text('至少选择一个卷').slideDown('fast');
    }
    if (bValid) {
        if (enable_submit) {
            enable_submit = false;
            var $submitBtn = $('.modal-footer').find('.btn-blue');
            $submitBtn.html('<i class="fa fa-spinner fa-spin" style="margin:3px 6px;"></i>');
            $('.rtn-tip').slideUp('fast');
            $.post("/vgroup_create", {
                    "volume_ids": volume_ids,
                    "vgroup_name": vgroup_name.val(),
                },
                function(data) {
                    if (data.reply.is_success) {
                        angular.element('#vgroup_controller').scope().close();
                        $('#vgroup_table').trigger("reloadGrid")
                    } else {
                        error = data.reply.error;
                        $('.rtn-tip').text(error).slideDown('fast');
                        $submitBtn.html(SelfTranslate("[[ 'label ok'|translate ]]"));
                        enable_submit = true;
                    }
                });
        }
    }
}

    function reload_volumes(val, realvalue){
        console.log(val)
        console.log(realvalue)
        $('#volume_choose').jqGrid('setGridParam', {
            page: 1,
            url: "/grid_volume_for_cgsnap?vgroup_id=null&protocol=" + realvalue
        }).trigger('reloadGrid');
    }
    
$(function() {
    $('#volume_choose').jqGrid(get_vgroup_volume_choose("/grid_volume_for_cgsnap?vgroup_id=null&protocol=iscsi"));
    $('#volume_save').jqGrid(get_vgroup_volume_save());
    /* 为小图标绑定鼠标移入移出事件 */
    var obj = {
        "vgroup_name":"由1到32位小写英文字母、数字、中划线(英文)构成。"
    }
    bindMouseEvent('#vgroup_create_modal',obj);
    /* 为小图标绑定鼠标移入移出事件结束 */


    var protocol = $("#pool_create_modal").find("#protocol_type");
    var protocol_mode = [];
    {% for protocol in protocols %}
        var values = new Array();
        var protocol = "{{ protocol }}".toUpperCase();
        if (protocol == 'ISCSI'){
            protocol = "iSCSI";
        }
        values[0] = "{{ protocol }}";
        values[1] = protocol;
        protocol_mode.push(values)
    {% endfor %}

    $('#protocol_type').rqDropDown({
        "datatype":"local",
        "source":protocol_mode, 
        "onchange": "reload_volumes",
        position:true
    }); 
     
});
</script>
<style>
    .col-xs-6 .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td{
        line-height: 14px;
        vertical-align: middle;
    }
</style>
<div class="modal-header">
    <h3>创建卷组</h3>
</div>
<div class="modal-body modal-body-height" id="vgroup_create_modal">
    <div class="vgroup-create-box">
        <div class="rtn-tip"></div>
        <table class="base-info">
            <tr>
                <td>
                    <label>[['model volume name'|translate]]</label><a>*</a>
                </td>
                <td colspan="3">
                    <input id="vgroup_name_cr" name="vgroup_name_cr" size="25" type="text" />
                    <i class="fa fa-question-circle" itype="vgroup_name"></i>
                </td>
            </tr>
            <tr>
                <td>
                    <label>协议类型</label><a>*</a>
                </td>
                <td>
                    <input id="protocol_type" readonly="readonly" class="rounded_dropdown" value='iSCSI' realvalue="iscsi"/>
                </td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="Choose_volume col-xs-6">
        选择卷
        <div class="check_vol_tip error_tip"></div>
        <table id="volume_choose">
        </table>
    </div>
    <div class="Save_volume col-xs-6">
        卷组
        <table id="volume_save">
        </table>
    </div>
    <div class="error-tip">
        <p></p><span></span>
    </div>
    <div class="tip">
        <p></p><span></span>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-blue" ng-click="ok()">[[ 'label ok'|translate ]]</button>
    <button class="btn btn-white" ng-click="cancel()">[[ 'label cancel'|translate ]]</button>
</div>
